let divEle = document.getElementsByTagName("div")[0];
divEle.style.width = 50 + "px";
divEle.style.height = 50 + "px";
divEle.style.backgroundColor = "skyblue";
divEle.style.borderRadius = "50%";
divEle.style.position = "absolute";
divEle.style.left = 0;
divEle.style.top = 0;

function getNum(min, max = 0) {
    min > max ? [min, max] = [max, min] : "";
    return parseInt(Math.random() * (max - min + 1)) + min;
}
let k;
function move() {
    clearInterval(k);
    let winWidth = window.innerWidth;
    let winHeight = window.innerHeight;
    winWidth -= parseInt(divEle.style.width);
    winHeight -= parseInt(divEle.style.height);
    console.log(winWidth);
    let i = 0;
    let j = 0;
    let x = 0;
    let y = 0;
    k = setInterval(
        function () {
            if (i == 0 || j == 0 || i == winWidth || j == winHeight) {
                divEle.style.backgroundColor = `rgb(${getNum(0, 255)},${getNum(0, 255)},${getNum(0, 255)})`;
            }
            divEle.style.transform = `translate(${x}px,${y}px)`;
            i += 1;
            j += 1;
            x = i;
            y = j;
            if (i >= winWidth) {
                x = 2 * winWidth - i;
                if (i >= 2 * winWidth) {
                    i = 0;
                    x = 0;
                }
            }
            if (j >= winHeight) {
                y = 2 * winHeight - j;
                if (j >= 2 * winHeight) {
                    j = 0;
                    y = 0;
                }
            }
        }, 1
    )
}
// move();